<template>
	<view>
		<view class="product-box">
			<view class="title-box" @click="openPopup">
				<text class="title">商品列表</text>
				<view class="select-box">
					<text>{{ selectedIds.length > 0 ? `已选(${selectedIds.length})` : '请选择' }}</text>
					<image src="/static/img/arrowright.png" mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
				</view>
			</view>
			<view v-if="selectedList.length > 0" class="selected-box">
				<view class="product-item" v-for="item in selectedList" :key="item.id">
					<image class="product-cover" :src="item.pic" mode="aspectFill"></image>
					<view class="product-info">
						<view class="product-title">{{item.name}}</view>
						<view class="product-extra">
							<view class="select-btn" @click="removeProduct(item.id)">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="popup-header">
					<text>商品列表</text>
				</view>
				<view class="popup-search">
					<image src="/static/img/search_ico.png" mode="aspectFit"></image>
					<input
						v-model="keyword"
						type="text"
						placeholder="搜索感兴趣的商品"
						confirm-type="search"
						@confirm="getdata()"
					>
				</view>
				<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="getMoreData">
					<view style="padding: 0 24rpx;">
						<view
							class="product-item"
							v-for="(item, index) in datalist"
							:class="[{noline: index === 0}]"
							:key="item.id"
							@click="selectProduct(item)"
						>
							<image class="product-cover" :src="item.pic" mode="aspectFill"></image>
							<view class="product-info">
								<view class="product-title">{{item.name}}</view>
								<view class="product-extra">
									<view class="select-btn">{{ selectedIds.includes(item.id) ? '已选' : '选择' }}</view>
								</view>
							</view>
						</view>
						<nomore v-if="nomore"></nomore>
						<nodata v-if="nodata"></nodata>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp();
	
	export default {
		props: {
			products: {
				type: Array,
				default:() => []
			}
		},
		data() {
			return {
				keyword: '',
				pagenum: 1,
				nomore: false,
				nodata: false,
				datalist: [],
				selectedList: this.products,
			}
		},
		computed: {
			selectedIds() {
				return this.selectedList.map(item => item.id)
			}
		},
		watch: {
			products(val) {
				this.selectedList = val || []
			}
		},
		methods: {
			removeProduct(id) {
				const index = this.selectedList.findIndex(item => item.id === id)
				
				this.selectedList.splice(index, 1)
				
				this.$emit('change', this.selectedIds)
			},
			openPopup() {
				this.getdata()
				this.$refs.popup.open()
			},
			selectProduct(data) {
				if (this.selectedIds.includes(data.id)) return
				
				this.selectedList.push(data)
				this.$emit('change', this.selectedIds)
				this.$refs.popup.close()
			},
			getMoreData() {
				this.pagenum = this.pagenum + 1;
				if (!this.nomore && !this.nodata) {
					this.getdata(true);
				}
			},
			getdata (loadmore) {
			 if(!loadmore){
					this.pagenum = 1;
					this.datalist = [];
				}
				this.nodata = false;
				this.nomore = false;
			  app.post('ApiAdminProduct/index', { keyword:this.keyword,pagenum: this.pagenum, st: '1' }, (res) => {
			    const data = res.datalist;
			    if (this.pagenum === 1){
						this.datalist = data;
						this.nodata = data.length === 0
						this.loaded();
			    } else {
			      if (data.length === 0) {
			        this.nomore = true;
			      } else {
			        const datalist = this.datalist;
			        const newdata = datalist.concat(data);
			        this.datalist = newdata;
			      }
			    }
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.product-box {
		padding: 0 24rpx;
		background: #ffffff;
		margin: 20rpx;
		border-radius: 30rpx;
		.title-box {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.select-box {
			display: flex;
			align-items: center;
			color: #999;
		}
		.selected-box {
			padding-bottom: 10rpx;
		}
	}
	.popup {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}
	.popup-header {
		height: 100rpx;
		display: flex;
		padding: 0 24rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
	.popup-search {
		margin: 16rpx 24rpx;
		height: 60rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		background-color: #f7f7f7;
		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}
		input {
			height: 100%;
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
	}
	.product-item {
		position: relative;
		display: flex;
		padding: 20rpx 0;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 1px;
			background-color: #ccc;
			transform-origin: top;
			transform: scaleY(0.5);
		}
	}
	.product-cover {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	.product-info {
		flex: 1;
		flex-direction: column;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.product-title {
		font-size: 28rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.product-extra {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}
	.select-btn {
		height: 48rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 1;
		border: 1px solid #ccc;
	}
	.noline {
		&::before {
			display: none;
		}
	}
</style>